import React, { useState, useEffect } from "react";
import ReactEcharts from "echarts-for-react";
import ChartsWrap from "components/charts/chartsWrap";

var colorList = [
  "#ff7f50",
  "#87cefa",
  "#da70d6",
  "#32cd32",
  "#6495ed",
  "#ff69b4",
  "#ba55d3",
  "#cd5c5c",
  "#ffa500",
  "#40e0d0",
  "#1e90ff",
  "#ff6347",
  "#7b68ee",
  "#d0648a",
  "#ffd700",
  "#6b8e23",
  "#4ea397",
  "#3cb371",
  "#b8860b",
  "#7bd9a5"
];

const DotChart = ({ title = "数据展示", name = "", data = []}) => {
  const [currentColorList, setColorList] = useState([...colorList]);
  const [chartOptions, setChartOptions] = useState({});

  useEffect(() => {
    // 计算填充色
    // 当颜色数据不够时，从中取随机索引的进行填补
    let tempColorList = [...colorList];
    if (data.length > colorList.length) {
      let temp = data.length - colorList.length;
      for (let i = 0; i < temp; i++) {
        tempColorList.push(
          colorList[Math.floor(Math.random() * colorList.length)]
        );
      }
    }
    setColorList(tempColorList);
    setChartOptions(getOption());
  }, [data]);

  const getOption = () => {
    let colorIndex = 0;
    let totalPrice = 0; //总价
    const billData = []; // 账单数据数组
    const billDataObj = new Map(); // 根据账单类型，通过对象唯一类型
    const otherData = {
      value: 0,
      name: "其他",
      symbolSize: 40,
      draggable: true,
      itemStyle: {
        normal: {
          shadowBlur: 100,
          shadowColor: currentColorList[colorIndex],
          color: currentColorList[colorIndex]
        }
      }
    }; // 小于1%的放入其他

    // 计算总价
    // 将数据根据classid分类
    data.forEach(item => {
      totalPrice += item.price;
      if (billDataObj.hasOwnProperty(item.classid)) {
        billDataObj[item.classid] += item.price;
      } else {
        billDataObj[item.classid] = item.price;
      }
    });

    // 从分类中取出每种类型的花费
    for (let key in billDataObj) {
      colorIndex++;
      let price = billDataObj[key];
      let rate = Math.round((price / totalPrice) * 100);
      if (rate > 1 && key !== "其他") {
        billData.push({
          value: price,
          name: key,
          symbolSize: 40 + rate * 3,
          draggable: true,
          itemStyle: {
            normal: {
              shadowBlur: 100,
              shadowColor: currentColorList[colorIndex],
              color: currentColorList[colorIndex]
            }
          }
        });
      } else {
        otherData.value += price;
        otherData.symbolSize += rate * 3;
      }
    }

    if (otherData.value) {
      billData.push(otherData);
    }

    return {
      // 图表标题
      backgroundColor: "#fff",
      tooltip: {},
      animationDurationUpdate: function(idx) {
        // 越往后的数据延迟越大
        return idx * 100;
      },
      toolbox: {
        feature: {
          saveAsImage: {
            show: true,
            name: title,
            pixelRatio: 2
          },
          dataView: {}
        }
      },
      animationEasingUpdate: "bounceIn",
      color: ["#fff", "#fff", "#fff"],
      series: [
        {
          type: "graph",
          layout: "force",
          force: {
            repulsion: 500,
            edgeLength: 10
          },
          roam: true,
          label: {
            normal: {
              show: true
            }
          },
          data: billData
        }
      ]
    };
  };

  return (
    <ChartsWrap title={title} data={data}>
      <ReactEcharts option={chartOptions} />
    </ChartsWrap>
  );
};

export default DotChart;
